<template>
  <div class="addGift">
    <div class="ele-title"><h4>添加活动</h4></div>
    <div class="ele-content">
      <el-form :model="form">
        <el-form-item label="活动名称:">
          <el-col :span="6">
            <el-input v-model="form.activeName" placeholder="请输入活动名称" />
          </el-col>
        </el-form-item>
        <el-form-item label="活动时间:">
          <el-col :span="3">
            <el-date-picker
              v-model="form.date1"
              type="datetime"
              placeholder="2020-08-31 12:00"
            />
          </el-col>
          <el-col :span="1" style="text-align: center;margin-left: 32px;">至</el-col>
          <el-col :span="3">
            <el-date-picker
              v-model="form.date2"
              type="datetime"
              placeholder="2020-08-31 12:00"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="活动商品:">
          <el-col :span="18">
            <div class="commodity-table-head">
              <el-col :span="18">
                <span>商品</span>
              </el-col>
              <el-col :span="6">
                <span>操作</span>
              </el-col>
            </div>
            <el-row>
              <el-col :span="18">
                <img src="../../../icons/svg/img.svg">
              </el-col>
              <el-col :span="6">
                <el-button type="text">删除</el-button>
              </el-col>
            </el-row>
            <el-col :span="24">
              <el-button type="text">添加商品</el-button>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item label="活动方式:">
          <el-col :span="1" style="text-align: center;">满</el-col>
          <el-col :span="3">
            <el-input v-model="form.money" placeholder="输入金额" />
          </el-col>
          <el-col :span="1" style="text-align: center;">元</el-col>
          <el-col :span="24">
            <el-button type="text" style="margin-left: 94px;">添加一级</el-button>
          </el-col>
          <el-col :span="24" class="left-space">
            <el-table
              :data="form.commodityTable"
              :header-cell-style="headColor"
              :span-method="objectSpanMethod"
              border
            >
              <el-table-column
                prop="commodity"
                label="商品"
              >
                <template slot-scope="scope">
                  <el-col :span="10">
                    <img :src="scope.row.commodity.img">
                  </el-col>
                  <el-col :span="10" class="el-col-offset-2">
                    <span>{{ scope.row.commodity.name }}</span>
                  </el-col>
                </template>
              </el-table-column>
              <el-table-column
                prop="spec"
                label="规格"
              />
              <el-table-column
                prop="giftNumber"
                label="赠送数量"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.commodity.name" placeholder="输入数量" />
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24">
            <el-button type="text">添加商品</el-button>
          </el-col>
        </el-form-item>
        <el-form-item label="适用门店:">
          <div class="activeShop-div-head flex">
            <div class="radio-left">
              <el-radio v-model="form.radio" label="support1">支持部门门店</el-radio>
              <el-radio v-model="form.radio" label="support2">不支持的门店</el-radio>
              <el-radio v-model="form.radio" label="support3">支持全部门店</el-radio>
            </div>
            <div class="button-right">
              <el-button type="text">添加门店</el-button>
            </div>
          </div>
          <el-col :span="24" class="left-space">
            <el-table
              :data="form.shopTable"
              :header-row-style="headColor"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="id"
                label="门店ID"
              />
              <el-table-column
                prop="shopName"
                label="门店名称"
              />
              <el-table-column
                prop="address"
                label="门店地址"
              />
              <el-table-column
                fixed="right"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="deleted(scope.row)">删除门店</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="button-left-space">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddGift',
  data() {
    return {
      headColor: { background: '#f3f3f3' },
      form: {
        commodityTable: [
          {
            commodity: { img: '../../../../icons/svg/img.svg', name: '纸尿裤' },
            spec: 'M',
            giftNumber: ''
          },
          {
            commodity: { img: '../../../../icons/svg/img.svg', name: '纸尿裤' },
            spec: 'L',
            giftNumber: ''
          },
          {
            commodity: { img: '../../../../icons/svg/img.svg', name: '纸尿裤2' },
            spec: 'M',
            giftNumber: ''
          }
        ],
        shopTable: [
          {
            id: '20193256',
            shopName: '老宝贝直营店',
            address: '江苏省苏州市园区东平街200号'
          },
          {
            id: '20193256',
            shopName: '老宝贝直营店',
            address: '江苏省苏州市园区东平街200号'
          }
        ]
      }

    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 2) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.addGift {
  padding: 0px 100px;
  .ele-title {
    margin-top: 40px;
  }
  .commodity-table-head{
    height: 36px;
    background: #F3F3F3;
  }
  .headColor{
    background: #F3F3F3;
  }
  ::v-deep.el-table th{
    background: #F3F3F3;
  }
  .left-space{
    padding-left: 66px;
  }
  .activeShop-div-head{
    justify-content: space-between;
  }
}
.flex{
  display: flex;
}

</style>
